<template>
	<div class="login">
		<el-form ref="ruleFormRef" :model="user" class="demo-ruleForm" label-position="right" label-width="120px" status-icon  :rules="myrules" :hide-required-asterisk="true" >
			<el-card class="box-card">
				<template #header>
				  <div class="card-header">
					<span><h3>保护环境，人人有责</h3></span>
				  </div>
				</template>
				<el-form-item label="手机号码：" prop="phone">
					<el-input v-model="user.phone" placeholder="请输入手机号码"/>
				</el-form-item>
				<el-form-item label="真实姓名：" prop="name">
					<el-input v-model="user.name" placeholder="请输入姓名"/>
				</el-form-item>
				<el-form-item label="年龄：" prop="age">
					<el-input v-model="user.age" placeholder="请输入年龄"/>
				</el-form-item>
				
				<el-form-item label="性别:">
				    <el-radio-group v-model="user.gender"  class="ml-4">
				      <el-radio value="1" size="small">男</el-radio>
				      <el-radio value="2" size="small">女</el-radio>
				    </el-radio-group>
				</el-form-item>
				
				<el-form-item label="密码：" prop="password">
					<el-input v-model="user.password" type="password" placeholder="请输入密码"/>
				</el-form-item>
				<el-form-item label="确认密码：" prop="checkpass">
					<el-input v-model="user.checkpass" type="password" placeholder="请重复密码"/>
				</el-form-item>
				
				<el-button type="primary" @click="register" size="large">注册</el-button>
				<el-button type="primary" @click="test" size="large">测试</el-button>
			</el-card>
		</el-form>
	</div>
</template>

<script setup>
import { ref ,reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
// import axios from 'axios'
import axios from '../../axios';
import Qs from 'qs'

let ruleFormRef = ref(null)

let router=useRouter()
const route=useRoute()
const routequery=route.query


const user=ref({
	phone:'',
	name:'',
	age:'',
	gender:'',
	password:'',
	birthday:'',
	checkpass:''
})
const register = () => {
	      ruleFormRef.value.validate(async (valid) => {
	        if (valid) {
				let dataJson={
						phone:user.value.phone,
						name:user.value.name,
						age:user.value.age,
						gender:user.value.gender,
						password:user.value.password,
						birthday:user.value.birthday,
				}
				console.log(dataJson)
				const response = await axios.post('http://192.168.231.54:7000/service-supervisor/supervisor/addSupervisor', dataJson);
				let result=response.data
				if(result.code==0){
					ElMessage.success('注册成功!');
					router.push({
						path:'/supervisor/login',
						query:{
							phone:user.value.phone,
							name:user.value.name,
							
							}			
						});	
				}else {
						console.log(result)
						ElMessage.error(result.msg);
						}
				
	        } 
	      })
	    }
function isNumeric(str) {
  return !isNaN(Number(str));
}
const checkAge = (rule, value, callback) => {
  if (!value) {
	return callback(new Error('请输入你的年龄'))
  }
  setTimeout(() => {
	if (!isNumeric(value)) {
		console.log(typeof(value))
	  callback(new Error('请输入数字'))
	} else {
	  if (value < 18) {
		callback(new Error('年龄必须大于 18'))
	  } else {
		callback()
	  }
	}
  }, 100)
}
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    callback();
    if (user.checkpass !== '') {
      try {
        if (!ruleFormRef.value) return;
        ruleFormRef.value.validateField('checkpass')
          .then(() => {
            // 验证通过
          })
          .catch(err => {
            // 处理验证错误
            console.error('Validation Error:', err);
          });
      } catch (error) {
        console.error('Caught Error:', error);
      }
    }
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== user.value.password) {
    callback(new Error("密码不匹配!"))
  } else {
    callback()
  }}
  
const myrules=reactive({
		phone:[{
			required:true,
			trigger:'blur',
			message:'手机号码为11位'
		}],
		password:[{
			validator:validatePass,
			trigger:'blur'
		}],
		name:[{
			required:true,
			trigger:'blur',
			message:'姓名为必填项'
		}],
		age:[{
			validator:checkAge,
			trigger:'blur'
		}],
		gender:[{
			required:true,
			message:'性别必填项'
		}],
		birthday:[{
			required:true,
			message:'生日必填项'
		}],
		checkpass:[{
			validator:validatePass2,
			trigger:'blur',
			
		}]
		
	})
	
</script>


<style>
	.login{
		height: 100vh;
		display:flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
		background-color: gray;
	}
	.demo-ruleForm {
		
		display: flex;
		justify-content: left; 
		align-items: center; 
		height: 80vh; 
	  
	}
	.box-card{
		height: 70vh;
		width: 30vw;
	}
	

</style>